<!DOCTYPE html>
<html>
<head>
  <title>Froala Design Blocks - Testimonials</title>
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0" />

  <script src="http://localhost:35729/livereload.js"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">

  <link type="text/css" rel="stylesheet" href="./css/froala_blocks.css">

  <style>
    .fdb-block {
      border-bottom: solid 1px #EEE;
    }
  </style>
</head>
<body>
  <section class="fdb-block">
    <div class="container">
      <div class="row align-items-center justify-content-center">
        <div class="col-12 col-md-10 col-lg-8">
          <p class="text-h3">
            "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."
          </p>

          <p class="text-h3"><strong>Person Name</strong>&nbsp; &nbsp;&nbsp;<em>Co-founder at Company</em></p>
        </div>
        <div class="col-8 col-sm-6 col-md-2 col-lg-3 col-xl-2 mt-4 mt-md-0 ml-auto mr-auto mr-md-0">
          <img alt="image" class="img-fluid" src="./imgs/img_round.svg"/>
        </div>
      </div>
    </div>
  </section>

  <section class="fdb-block" style="background-image: url(./imgs/bg_3.svg)">
    <div class="container">
      <div class="fdb-box">
        <div class="row align-items-center justify-content-center">
          <div class="col-10 col-sm-6 col-md-4 col-lg-3 col-xl-2 m-auto">
            <img alt="image" class="img-fluid" src="./imgs/img_round.svg"/>
          </div>

          <div class="col-12 col-md-8 ml-auto mr-auto mt-4 mt-md-0">
            <p class="text-h3">
              "Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar."
            </p>

            <p class="text-h3 mt-4 mt-lg-5"><strong>Person Name</strong></p>
            <p><em>Co-founder at Company</em></p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="fdb-block">
    <div class="container">
      <div class="row text-center">
        <div class="col-12">
          <h3><strong>You are in good company</strong></h3>

          <div class="mt-5 justify-content-center">
            <img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="./imgs/customers/adobe.svg">
            <img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="./imgs/customers/discovery.svg">
            <img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="./imgs/customers/ebay.svg">
            <img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="./imgs/customers/samsung.svg">
            <img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="./imgs/customers/orange.svg">
            <img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="./imgs/customers/salesforce.svg">
          </div>
          <div class="mt-2 mt-md-5 justify-content-center">
            <img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="./imgs/customers/cisco.svg">
            <img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="./imgs/customers/apple.svg">
            <img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="./imgs/customers/ibm.svg">
            <img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="./imgs/customers/intel.svg">
            <img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="./imgs/customers/panasonic.svg">
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="fdb-block">
    <div class="container">
      <div class="row align-items-center justify-content-center">
        <div class="col-md-6">
          <div class="fdb-box fdb-touch">
            <p class="text-h3 mb-4">"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics."</p>

            <p>
              <img alt="image" height="50" src="./imgs/img_round.svg">
              <strong class="ml-3">Person Name</strong>
            </p>
          </div>
        </div>

        <div class="col-md-6 mt-4 mt-md-0">
          <div class="fdb-box fdb-touch">
            <p class="text-h3 mb-4">"A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth."</p>

            <p>
              <img alt="image" height="50" src="./imgs/img_round.svg">
              <strong class="ml-3">Person Name</strong>
            </p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="fdb-block" style="background-image: url(./imgs/bg_2.svg)">
    <div class="container">
      <div class="row align-items-center justify-content-center">
        <div class="col-lg-9 col-xl-6">
          <div class="fdb-box">
            <div class="row">
              <div class="col-8 col-sm-6 col-md-4 col-xl-3 ml-auto mr-auto">
                <img alt="image" class="img-fluid" src="./imgs/img_round.svg"/>
              </div>

              <div class="col-md-8 mt-4 mt-md-0">
                <p class="text-h3">
                  "Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar."
                </p>

                <p class="text-h3 mt-4 mt-xl-5"><strong>Person Name</strong></p>
                <p><em>Co-founder at Company</em></p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-lg-9 col-xl-6 mt-4 mt-xl-0">
          <div class="fdb-box">
            <div class="row">
              <div class="col-8 col-sm-6 col-md-4 col-xl-3 ml-auto mr-auto">
                <img alt="image" class="img-fluid" src="./imgs/img_round.svg"/>
              </div>

              <div class="col-md-8 mt-4 mt-md-0">
                <p class="text-h3">
                  "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."
                </p>

                <p class="text-h3 mt-4 mt-xl-5"><strong>Person Name</strong></p>
                <p><em>Co-founder at Company</em></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="fdb-block">
    <div class="container">
      <div class="row text-center justify-content-center">
        <div class="col-lg-8">
          <h2>You are in good company</h2>
          <p class="text-h3">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
          <div class="mt-5 justify-content-center">
            <img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="./imgs/customers/adobe.svg">
            <img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="./imgs/customers/discovery.svg">
            <img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="./imgs/customers/ebay.svg">
            <img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="./imgs/customers/samsung.svg">
            <img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="./imgs/customers/orange.svg">
            <img alt="image" height="30" class="ml-3 mr-3 mb-2 mt-2" src="./imgs/customers/salesforce.svg">
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="fdb-block bg-dark">
    <div class="container">
      <div class="row justify-content-center text-center">
        <div class="col">
          <img alt="image" height="40" class="ml-3 mr-3 mb-2 mt-2" src="./imgs/customers/adobe.svg">
          <img alt="image" height="40" class="ml-3 mr-3 mb-2 mt-2" src="./imgs/customers/discovery.svg">
          <img alt="image" height="40" class="ml-3 mr-3 mb-2 mt-2" src="./imgs/customers/ebay.svg">
          <img alt="image" height="40" class="ml-3 mr-3 mb-2 mt-2" src="./imgs/customers/samsung.svg">
          <img alt="image" height="40" class="ml-3 mr-3 mb-2 mt-2" src="./imgs/customers/orange.svg">
          <img alt="image" height="40" class="ml-3 mr-3 mb-2 mt-2" src="./imgs/customers/salesforce.svg">
        </div>
      </div>
    </div>
  </section>

  <section class="fdb-block">
    <div class="container">
      <div class="row pb-xl-5 text-center justify-content-center">
        <div class="col-md-10 col-lg-7">
          <h1>Testimonials</h1>
        </div>
      </div>

      <div class="row mt-5 justify-content-center">
        <div class="col-md-8 col-lg-4 col-xl-3 m-auto text-center">
          <img alt="image" height="50" src="./imgs/customers/intel.svg">
          <p class="text-h3 mt-3">"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia."</p>

          <p class="text-h3 mt-4 mt-xl-5"><strong>Person Name</strong></p>
          <p>Co-founder at Company</p>
        </div>

        <div class="col-md-8 col-lg-4 col-xl-3 pt-5 pt-lg-0 m-auto text-center">
          <img alt="image" height="50" src="./imgs/customers/apple.svg">
          <p class="text-h3 mt-3">"Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."</p>

          <p class="text-h3 mt-4 mt-xl-5"><strong>Person Name</strong></p>
          <p>Co-founder at Company</p>
        </div>

        <div class="col-md-8 col-lg-4 col-xl-3 pt-5 pt-lg-0 m-auto text-center">
          <img alt="image" height="50" src="./imgs/customers/samsung.svg">
          <p class="text-h3 mt-3">"A small river named Duden flows by their place and supplies it with the necessary regelialia."</p>

          <p class="text-h3 mt-4 mt-xl-5"><strong>Person Name</strong></p>
          <p>Co-founder at Company</p>
        </div>
      </div>
    </div>
  </section>

  <section class="fdb-block bg-dark" style="background-image: url(./imgs/bg_4.svg)">
    <div class="container">
      <div class="row text-center justify-content-center">
        <div class="col-md-10 col-lg-8 col-xl-7">
          <h1>Testimonials</h1>
          <p class="text-h3">A small river named Duden flows by their place and supplies it with the necessary regelialia. Separated they live in Bookmarksgrove right at the coast of the Semantics.</p>
        </div>
      </div>

      <div class="row mt-5 align-items-center justify-content-center">
        <div class="col-md-8 col-lg-4">
          <div class="fdb-box">
            <div class="row no-gutters align-items-center">
              <div class="col-3">
                <img alt="image" class="img-fluid" src="./imgs/img_round.svg"/>
              </div>
              <div class="col-8 ml-auto">
                <p>
                  <strong>Person Name</strong><br>
                  <em>Co-founder at Company</em>
                </p>
              </div>
            </div>
            <div class="row mt-4">
              <div class="col-12">
                <p class="text-h3">
                  "Even the all-powerful Pointing has no control about the blind texts it is an unorthographic life. One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar."
                </p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-8 col-lg-4 mt-4 mt-lg-0">
          <div class="fdb-box">
            <div class="row no-gutters align-items-center">
              <div class="col-3">
                <img alt="image" class="img-fluid" src="./imgs/img_round.svg"/>
              </div>
              <div class="col-8 ml-auto">
                <p>
                  <strong>Person Name</strong><br>
                  <em>Co-founder at Company</em>
                </p>
              </div>
            </div>
            <div class="row mt-4">
              <div class="col-12">
                <p class="text-h3">
                  "Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."
                </p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-8 col-lg-4 mt-4 mt-lg-0">
          <div class="fdb-box">
            <div class="row no-gutters align-items-center">
              <div class="col-3">
                <img alt="image" class="img-fluid" src="./imgs/img_round.svg"/>
              </div>
              <div class="col-8 ml-auto">
                <p>
                  <strong>Person Name</strong><br>
                  <em>Co-founder at Company</em>
                </p>
              </div>
            </div>
            <div class="row mt-4">
              <div class="col-12">
                <p class="text-h3">
                  "Separated they live in Bookmarksgrove right at the coast of the Semantics, far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts."
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section class="fdb-block">
    <div class="container">
      <div class="row text-center justify-content-center">
        <div class="col-md-10 col-lg-7">
          <h1>Testimonials</h1>
        </div>
      </div>

      <div class="row mt-5 justify-content-center">
        <div class="col-md-10 col-lg-3 ml-auto mr-auto text-center">
          <p class="text-h3 mb-4 mb-lg-5">"Far far away, behind the word mountains, far from the countries Vokalia and Consonantia."</p>

          <p><img alt="image" height="50" src="./imgs/img_round.svg"></p>
          <p class="text-h3"><strong>Person Name</strong></p>
          <p>Co-founder, Company</p>
        </div>

        <div class="col-md-10 col-lg-3 pt-5 pt-lg-0 ml-auto mr-auto text-center">
          <p class="text-h3 mb-4 mb-lg-5">"Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean."</p>

          <p><img alt="image" height="50" src="./imgs/img_round.svg"></p>
          <p class="text-h3"><strong>Person Name</strong></p>
          <p>Co-founder, Company</p>
        </div>

        <div class="col-md-10 col-lg-3 pt-5 pt-lg-0 ml-auto mr-auto text-center">
          <p class="text-h3 mb-4 mb-lg-5">"A small river named Duden flows by their place and supplies it with the necessary regelialia."</p>

          <p><img alt="image" height="50" src="./imgs/img_round.svg"></p>
          <p class="text-h3"><strong>Person Name</strong></p>
          <p>Co-founder, Company</p>
        </div>
      </div>
    </div>
  </section>
</body>
</html>
